<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow :alpha="alpha">确认领卡</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
			<view class="list">
				<view class="list__item">
					<image src="/static/product/vipcard.png" class="list__item__bg" mode=""></image>
					<view class="list__item__box">
						<view class="list__item__price">
							<view class="list__item__price__text">
								价值
								<view class="list__item__price__text__pz">
									品质之选·畅游全国
								</view>
							</view>
							<view class="list__item__price__num">
								<view class="">
									<text style="font-size: 36rpx;font-family: PingFang SC;">￥</text>{{cardinfo.price}}
								</view>
								<tn-button fontColor="#5B4804" shape='round' :fontSize='24' width='158rpx'
									backgroundColor='#E4C883' height='56rpx'>选择路线</tn-button>
							</view>
						</view>
						<view class="list__item__content">
							<view class="list__item__content__item" v-for="(item,index) in conlist" :key="index">
								{{index+1}}.{{item}}
							</view>
						</view>
						<view class="list__item__cardno">
							<view class="">
								卡号: {{cardinfo.card_no}}
							</view>
							<view class="list__item__cardno__item">
								密码:{{cardinfo.pass}}
							</view>
						</view>
						<view class="list__item__qrbox">
							<image src="https://mm.fuliaoxx.com/qrcode.png" style="width: 100%;height: 100%;" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="tips">
				此卡免费领取。点击确认领取即可在个人中心产品管理里查看我的电子卡。
			</view>
			<view class="tn-flex tn-flex-row-center footer">
				<tn-button :loading='btnloding' @click="lingqu" fontColor="#5B4804" shape='round' width='604rpx' height='99rpx' :fontSize='36' backgroundColor="#D9BC73" shadow>确认领取</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
	import product from '@/api/_product.js'
	export default {
		data() {
			return {
				btnloding:false,
				alpha: true,
				conlist: [
					'此卡为双人旅行卡，不可单独一人使用',
					'本卡可转让，赠予不可兑换现金',
					'本卡售出后不可退换，消费不记名',
					'本卡适用于32-62周岁，非旅游目的地本省及本省工作生活的中国汉族公民(收客要求具体见告知书)',
					'获取此卡后需提前3天预约，详情请扫小程序码咨询客服'
				],
				cardinfo:{},
				id:''
			};
		},
		methods:{
			lingqu(){
				let _this=this
				this.btnloding=true
				product.acceptCard({usercard_id:this.id}).then(res=>{
					if(res.data.code==1){
						this.$tn.message.toast('领取成功')
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/product/manage'
							})
							_this.btnloding=false
						},1000)
					}else{
						_this.btnloding=false
					}
				})
			}
		},
		onLoad(o) {
			this.id=o.id
			product.cardInfoDetail({id:o.id}).then(res=>{
				if(res.data.code==1){
					this.cardinfo=res.data.data
				}
			})
			console.log(o)
		}
	}
</script>

<style lang="scss">
	.con {
		position: relative;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	.list {
		
		&__item {
			width: 690rpx;
			height: 443rpx;
			position: relative;
			margin-bottom: 30rpx;

			&__bg {
				width: 690rpx;
				height: 443rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__box {
				width: 690rpx;
				height: 443rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__price {
				color: #D3B468;
				position: absolute;
				top: 72rpx;
				left: 0;
				padding-left: 228rpx;
				padding-right: 42rpx;
				width: 690rpx;

				&__text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #D3B468;
					line-height: 24rpx;
					margin-bottom: 18rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&__pz {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 16rpx;
						color: #A18D5C;
						line-height: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				&__num {
					font-weight: bold;
					font-size: 52rpx;
					color: #D3B468;
					line-height: 37rpx;
					font-family: DINNextLTPro-Bold;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

			}

			&__content {
				width: 480rpx;
				// height: 199rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 18rpx;
				color: #A18D5C;
				line-height: 36rpx;
				position: absolute;
				bottom: 30rpx;
				left: 40rpx;
			}

			&__cardno {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #D3B468;
				line-height: 20rpx;
				position: absolute;
				top: 38rpx;
				right: 39rpx;
				display: flex;

				&__item {
					padding-bottom: 9rpx;
					border-bottom: 1rpx solid #76674A;
					margin-left: 22rpx;
				}
			}

			&__qrbox {
				width: 127rpx;
				height: 127rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				position: absolute;
				top: 205rpx;
				right: 46rpx;
			}
		}
	}
	.tips{
		height: 120rpx;
		background: #F3F5F7;
		border-radius: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #86888A;
		line-height: 38rpx;
		padding: 0 64rpx 0 27rpx;
		display: flex;
		align-items: center;
	}
	.footer{
		margin-top: 174rpx;
	}
</style>